<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心情日记 - 原型设计</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        :root {
            --primary-color: #4A90E2;
            --secondary-color: #F5A623;
            --background-color: #F8F9FA;
            --text-color: #333333;
            --border-radius: 12px;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .container {
            max-width: 414px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            position: relative;
        }

        /* 顶部导航栏 */
        .navbar {
            padding: 15px 20px;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .navbar h1 {
            font-size: 18px;
            color: var(--text-color);
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 414px;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            border-top: 1px solid #eee;
        }

        .nav-item {
            text-align: center;
            color: #666;
            font-size: 12px;
        }

        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }

        /* 主页面内容 */
        .content {
            padding: 20px;
            padding-bottom: 70px;
        }

        /* 情绪卡片 */
        .mood-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        /* 按钮样式 */
        .btn {
            background: var(--primary-color);
            color: white;
            padding: 12px 24px;
            border-radius: var(--border-radius);
            border: none;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin: 10px 0;
        }

        /* 输入框样式 */
        .input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            margin: 10px 0;
            font-size: 16px;
        }

        /* 情绪图表区域 */
        .chart-area {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            margin: 20px 0;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ddd;
        }

        /* AI对话框 */
        .chat-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .chat-message {
            display: flex;
            gap: 10px;
            margin: 5px 0;
        }

        .chat-message.ai {
            flex-direction: row;
        }

        .chat-message.user {
            flex-direction: row-reverse;
        }

        .message-content {
            background: #f0f0f0;
            padding: 10px 15px;
            border-radius: 15px;
            max-width: 70%;
        }

        .ai .message-content {
            background: var(--primary-color);
            color: white;
        }

        /* 待办事项样式 */
        .todo-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: var(--border-radius);
            margin: 10px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .todo-item input[type="checkbox"] {
            margin-right: 15px;
        }

        /* 标签样式 */
        .tag {
            background: #E8F0FE;
            color: var(--primary-color);
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: 8px;
        }

        /* 情绪选择器 */
        .mood-selector {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
        }

        .mood-option {
            text-align: center;
            padding: 10px;
            border-radius: var(--border-radius);
            background: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .mood-option i {
            font-size: 24px;
            margin-bottom: 5px;
            color: var(--secondary-color);
        }

        /* 统计卡片 */
        .stats-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 15px;
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .stats-card .number {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
        }

        /* 设置项 */
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: white;
            border-radius: var(--border-radius);
            margin: 10px 0;
        }

        /* 日记编辑器 */
        .diary-editor {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            margin: 20px 0;
        }

        .diary-editor textarea {
            width: 100%;
            min-height: 200px;
            border: none;
            resize: none;
            font-size: 16px;
            line-height: 1.6;
            outline: none;
        }

        /* AI提示区域 */
        .ai-suggestions {
            background: #F8F9FA;
            border-radius: var(--border-radius);
            padding: 15px;
            margin: 10px 0;
        }

        .ai-suggestions p {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <!-- 首页/仪表盘 -->
    <div class="container" id="dashboard">
        <div class="navbar">
            <h1>今日心情</h1>
            <i class="fas fa-bell"></i>
        </div>
        
        <div class="content">
            <div class="mood-card">
                <h2>你今天感觉如何？</h2>
                <div class="mood-selector">
                    <div class="mood-option">
                        <i class="fas fa-smile"></i>
                        <div>开心</div>
                    </div>
                    <div class="mood-option">
                        <i class="fas fa-meh"></i>
                        <div>一般</div>
                    </div>
                    <div class="mood-option">
                        <i class="fas fa-frown"></i>
                        <div>难过</div>
                    </div>
                </div>
            </div>

            <div class="chart-area">
                情绪趋势图表
            </div>

            <div class="stats-card">
                <div>
                    <div>本周日记数</div>
                    <div class="number">5</div>
                </div>
                <i class="fas fa-book fa-2x"></i>
            </div>

            <div class="stats-card">
                <div>
                    <div>待办完成率</div>
                    <div class="number">85%</div>
                </div>
                <i class="fas fa-tasks fa-2x"></i>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item">
                <i class="fas fa-home"></i>
                <div>首页</div>
            </div>
            <div class="nav-item">
                <i class="fas fa-book"></i>
                <div>日记</div>
            </div>
            <div class="nav-item">
                <i class="fas fa-tasks"></i>
                <div>待办</div>
            </div>
            <div class="nav-item">
                <i class="fas fa-user"></i>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 写日记页面 -->
    <div class="container" id="write-diary" style="display: none;">
        <div class="navbar">
            <h1>写日记</h1>
            <button class="btn" style="width: auto; padding: 8px 16px;">保存</button>
        </div>

        <div class="content">
            <div class="diary-editor">
                <textarea placeholder="今天发生了什么？"></textarea>
            </div>

            <div class="ai-suggestions">
                <h3><i class="fas fa-robot"></i> AI建议</h3>
                <p>看起来你今天心情不错！要不要详细描述一下让你开心的事情？</p>
            </div>

            <div class="mood-selector">
                <div class="mood-option">
                    <i class="fas fa-smile"></i>
                    <div>开心</div>
                </div>
                <div class="mood-option">
                    <i class="fas fa-meh"></i>
                    <div>一般</div>
                </div>
                <div class="mood-option">
                    <i class="fas fa-frown"></i>
                    <div>难过</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 待办事项页面 -->
    <div class="container" id="todos" style="display: none;">
        <div class="navbar">
            <h1>待办事项</h1>
            <i class="fas fa-plus"></i>
        </div>

        <div class="content">
            <input type="text" class="input" placeholder="添加新的待办事项">

            <div class="todo-item">
                <input type="checkbox">
                <div>
                    <div>完成项目报告</div>
                    <div class="tag">工作</div>
                </div>
            </div>

            <div class="todo-item">
                <input type="checkbox">
                <div>
                    <div>健身30分钟</div>
                    <div class="tag">健康</div>
                </div>
            </div>
        </div>
    </div>

    <!-- AI助手对话页面 -->
    <div class="container" id="ai-chat" style="display: none;">
        <div class="navbar">
            <h1>AI助手</h1>
        </div>

        <div class="content">
            <div class="chat-container">
                <div class="chat-message ai">
                    <div class="message-content">
                        你好！我是你的AI助手，有什么我可以帮你的吗？
                    </div>
                </div>

                <div class="chat-message user">
                    <div class="message-content">
                        我今天心情不太好
                    </div>
                </div>

                <div class="chat-message ai">
                    <div class="message-content">
                        我理解你的感受。让我们一起来分析一下是什么影响了你的心情，也许我能帮你找到一些解决方法。
                    </div>
                </div>
            </div>

            <div style="position: fixed; bottom: 70px; left: 0; right: 0; padding: 20px;">
                <input type="text" class="input" placeholder="输入消息...">
            </div>
        </div>
    </div>

    <!-- 个人中心页面 -->
    <div class="container" id="profile" style="display: none;">
        <div class="navbar">
            <h1>个人中心</h1>
            <i class="fas fa-cog"></i>
        </div>

        <div class="content">
            <div class="mood-card">
                <div style="display: flex; align-items: center; gap: 20px;">
                    <img src="https://via.placeholder.com/60" style="border-radius: 30px;">
                    <div>
                        <h3>张三</h3>
                        <p>已坚持记录 30 天</p>
                    </div>
                </div>
            </div>

            <div class="setting-item">
                <div>通知设置</div>
                <i class="fas fa-chevron-right"></i>
            </div>

            <div class="setting-item">
                <div>隐私设置</div>
                <i class="fas fa-chevron-right"></i>
            </div>

            <div class="setting-item">
                <div>主题设置</div>
                <i class="fas fa-chevron-right"></i>
            </div>

            <div class="setting-item">
                <div>关于我们</div>
                <i class="fas fa-chevron-right"></i>
            </div>

            <button class="btn" style="background: #ff4444;">退出登录</button>
        </div>
    </div>
</body>
</html> 